<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>岗位管理</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="roleConForm">
</form>

<!--按钮框-->
<div class="layui-row">
    <div class="layui-col-xs12" id="roleBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
    </div>
</div>

<!--列表-->
<table class="layui-hide" id="roleTable"></table>





<!-- 你的 HTML 代码 -->
<script>
    layui.use(['http','shopx','form','pub','table'], function () {
        var  http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;

        var componentName = "role";
        var controlName = "sysRole";

        var page = {
            //page.name
            name:componentName,
            //页面元素前缀，按配置，施工等模块定义
            prefix:'a2',
            //page标题
            title:"岗位",
            //查询列表接口
            qryUrl:'/'+controlName+'/queryPageList',
            //查询明细接口
            detUrl:'/'+controlName+'/queryOneByPrimaryKey',
            //新增接口
            addUrl:'/'+controlName+'/insertOne',
            //修改接口
            updUrl:'/'+controlName+'/updateOne',
            //删除接口
            delUrl:'/'+controlName+'/deleteChecked',
            //批量删除接口
            delBatchUrl:'/'+controlName+'/deleteBatch',
            //导出接口
            downloadUrl:''+controlName+'/download',
            //查询条件
            conName:componentName+'ConForm',
            //按钮
            btnName:componentName+'BtnForm',
            //表格id
            tableName:componentName+'Table',
            //表单Id
            formName:componentName+'Form',
            //表主键
            keyId:'roleId',
            //排序
            orderBy:" role_code desc",
            //默认初始化查询条件
            addModel:{
                // dictCode:"DEDUCTION_FLAG"
            },
            //查询条件 label#id#类型
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            conArray : [
                "岗位名称|roleName|TEXT",
                "岗位类型|roleType:ENT_ROLE_TYPE:t3|DICT",
            ],
            //按钮 id#名称#类型#图标#是否权限控制
            btnArray:[
                'roleQueryBtn|查询|primary|&#xe615;|N',
                'roleAddBtn|新增|primary|&#xe624;|Y',
                'roleUpdateBtn|编辑|primary|&#xe642;|Y',
                'roleViewBtn|明细|primary|&#xe655;|N',
                'roleDelBtn|删除|danger|&#xe640;|Y',
                'roleExpBtn|导出|normal|&#xe67d;|Y'
            ],

            //表格列
            cols:[[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'roleId', title: '编号', fixed: 'left'}
                , {field: 'roleName', title: '岗位名'}
                , {field: 'roleCode', title: '岗位编码'}
                , {
                    field: 'roleType', title: '岗位类型', sort: true, templet: function (d) {
                        return shopx.getDictByCodeName("ENT_ROLE_TYPE",d.roleType);
                    }
                }
                , {field: 'createTime', title: '创建时间', sort: true}
                , {field: 'updateTime', title: '修改时间', sort: true}
            ]],
            //表单 label|id|类型|是否必填
            formArray:[
                "主键|roleId|HIDDEN",
                "岗位名|roleName|TEXT|Y",
                "岗位编码|roleCode|TEXT|Y",
                "岗位类型|roleType:ENT_ROLE_TYPE:t2|DICT|Y",
                "绑定菜单|rUrlTree|TREE|Y",
            ],
            beforeAddFunc:function(){
                a2RenderForm();
                form.render();
            },
            midAddFunc:function(data){
                //获取树菜单选中值
                var chkUrlIds = layui.tree.getChecked('f_a2_rUrlTree');
                var urlIds = getTreeChkIds(chkUrlIds);
                data.field['urlIds'] = urlIds;
            },
            beforeUpdFunc:function(res,callBackFunc){
                a2RenderForm(res,callBackFunc,false);
                //默认选中
                form.render();
            },
            midUpdFunc:function(data){
                // form.render();
                var chkUrlIds = layui.tree.getChecked('f_a2_rUrlTree');
                var urlIds = getTreeChkIds(chkUrlIds);
                data.field['urlIds'] = urlIds;
            },
            beforeViewFunc:function(res,callBackFunc){
                a2RenderForm(res,callBackFunc,true);
            },
            // midViewFunc:function(data){
            //     var chkUrlIds = layui.tree.getChecked('f_a2_rUrlTree');
            //     var urlIds = getTreeChkIds(chkUrlIds);
            //     data.rspData.urlIds = urlIds;
            // }
        }
        //展示菜单
        shopx.genCond(page);
        //展示按钮
        shopx.genBtn(page);
        //展示有权限的按钮
        shopx.eleAuthShow(http.getUserFunc());
        //展示form表单
        // shopx.genForm(page.formArray,"editFormDiv");

        form.render();

        //初始化分页查询 其中addModel是初始化查询条件
        http.initPage(page);
    });

    function a2RenderForm(res,callBackFunc,viewFlag){
        if(layui.pub.isEmpty(res)){
            //新增
            //1、渲染菜单树
            //查询菜单树
            layui.http.postRequest("/sysUrl/queryUrlNodeList", 'POST', {}, function suc(data) {
                // console.info("1:"+JSON.stringify(data.rspData));
                var treeModel = [
                    {
                        "id": "1123400001",
                        "title": "创艺装饰",
                        "children":JSON.parse(data.rspData)
                    }
                ];
                layui.tree.render({
                    elem: '#f_a2_rUrlTree'
                    ,data: JSON.parse(JSON.stringify(treeModel))
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'f_a2_rUrlTree'
                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                });
            }, null, false, false);
        }else{
            //展示角色绑定树菜单，查询已绑定编号
            layui.jquery("#f_a2_roleCode").attr("readonly",true);
            // console.info(JSON.stringify(res));
            var urlIds = res.rspData.urlIds;
            var model={
                ids:urlIds
            }
            layui.http.postRequest("/sysUrl/queryEditUrlNodeList", 'POST', model, function suc(data) {
                // console.info("1:"+JSON.stringify(data.rspData));
                var treeModel = [
                    {
                        "id": "1123400001",
                        "title": "创艺装饰",
                        "children":JSON.parse(data.rspData)
                    }
                ];
                layui.tree.render({
                    elem: '#f_a2_rUrlTree'
                    ,data: JSON.parse(JSON.stringify(treeModel))
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'f_a2_rUrlTree'
                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                });
            }, null, false, false);
            if(!layui.pub.isEmpty(callBackFunc) && (typeof callBackFunc == 'function')){
                //查询结果完成后，新建一个回调函数，进行元素再次渲染
                //如user响应完成后，需要重新查询数据库，渲染一次角色菜单，生成多选下拉框，则需要再响应后，再调用一次接口，获取数据后，再通过回调函数渲染一次表单
                callBackFunc();
            }
        }
    }

    /**
     * 获取树选中的id
     * @param data
     * @returns {string}
     */
    function getTreeChkIds(data) {
        var ids = [];
        function traverse(node) {
            if (node.id) {
                ids.push(node.id);
            }
            if (node.children && node.children.length > 0) {
                for (var i = 0; i < node.children.length; i++) {
                    traverse(node.children[i]);
                }
            }
        }
        for (var i = 0; i < data.length; i++) {
            traverse(data[i]);
        }
        return ids.join(',');
    }

    /**
     * 给树填写check：true字段
     * @param data
     * @param ids
     */
    function addCheckedProperty(data, urlIds) {
        function traverse(node) {
            if (node.id && urlIds.includes(node.id)) {
                node.checked = true;
            }
            if (node.children) {
                node.children.forEach(traverse);
            }
        }
        data.forEach(traverse);
        console.info(JSON.stringify(data));
    }

</script>
</body>
</html>